windows搭建React Native环境

前情提要:

本章图片30张,请注意你的流量
之前我在简书写过RN环境搭建的教程
简书:TrustTheBoy
教程地址:http://www.jianshu.com/p/8f9662dbaa99

本次搭建环境:

操作系统:windows 10 64位
版本号:1607
OS 内部版本 14393.321
React Native版本:0.35

以下工具可以问我要
以下工具可以问我要
以下工具可以问我要
需要准备:(以下工具可以问我要)

1.JDK1.8:版本不强求,最好都用最新的吧,1.7也可以
2.SDK:用于测试安卓应用的万能模拟器
3.Node:node.js是轻量级的Web服务器,React Native跑起来需要安装node
4.Git:安装React-native需要用到git,如果没有配置git,需要先下载对应的客户端
5.VirtualBox:免费虚拟机软件,具有丰富的特色,而且性能也很优异!简单易用
6.Genymotion:最棒模拟体验

科学上网工具(重要),过程中保持开启

作为开发者,如果不会科学上网,那真的说不过去,不会翻墙,甚至你连下载开发工具都很难,所以无论如何你都该拥有科学上网的能力

进入正题

👉第一步:安装JDK(本人安装的是最新版本JDK1.8),并配置变量环境

JDK的位置

例如:(JAVA_HOME=> D:\java)

设置环境变量PATH:

例如:(PATH=> %JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;)

配置完成按 win+r 键,打开 运行 输入 cmd ,键入命令 javacjava 检测是否安装成功

图11111111111111111111111

👉第二步:安装SDK

(1)首先设置SDK环境变量,

Android SDK Manager的位置

例如:(ANDROID_HOME=> D:\android-sdk-windows)

设置环境变量PATH:

例如:(PATH=> %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools)

配置完成按 win+r
打开 运行 输入 cmd
键入命令 android 检测是否安装成功

(2)然后双击打开SDK Manager.exe

(3)使用国内镜像地址下载

如果你没有使用科学上网工具
那么请访问http://www.androiddevtools.cn/
查看切换镜像地址以及设置方法

(4)设置完成之后点击菜单Packages–>Reload

(5)然后选择图中所勾选文件,点击右下方Install packages

(6)接着点击Accept License,然后点击Install进行下载

由于文件需要很久才能下载下来,所以可以进行第三步了,
但是不要关闭Android SDK窗口

👉第三步:安装Node,访问https://nodejs.org/en/

node.js是轻量级的Web服务器,React Native跑起来需要安装node

安装完成之后:

win+r
打开 运行 输入 cmd
键入node -v的命令来测试NodeJS是否安装成功

👉第四步:安装Git

安装React-native需要用到git,
如果没有配置git
需要先下载对应的客户端,
访问:

https://git-for-windows.github.io
安装时这里记得选择第二个

👉第五步:安装react-native命令行工具

先创建文件名,(名字可以自定义)
按住Shift键,鼠标右键点击在此打开命令窗口
输入

git clone https://github.com/facebook/react-native.git

(过程比较久,看网速啦)

克隆成功

然后进入目录下的react-native目录下的react-native-cli目录,输入:

npm install -g  

回车

完成

react-native命令安装完成

👉第六步:创建React Native项目

📍到这里的时候请查看SDK下载完没,
📍下载完成请检查是否勾选的都有下载
📍如果没有问题,请继续

(1).进入你要要存放项目的盘符,执行react-native init (项目名)—>这里时间很长,耐心等待

OK

👉第七步:开启React Native服务,键入命令:(需要等待一段时间)

react-native start

用浏览器访问:

http://localhost:8081/index.android.bundle?platform=android

看看是否可以看到打包后的脚本
看到很长的js代码就对了
第一次访问通常需要十几秒
并且在packager的命令行可以看到进度。

以下不是必须,如果有真机直接用真机也行

👉第八步:安装VirtualBox

👉第九步:Genymotion

1.配置Genymotion

打开Genymotion
点击菜单栏Setting—>ADB,
选择use custom Android SDK tools
点击Browse,选择前面SDK安装目录

在Genymotion下载需要翻墙,可以百度ova格式镜像

ova镜像我可以问我要~,以下是自己下载步骤
#

在软件中下载的请进入Genymotion官网,注册一个账号,

https://www.genymotion.com/account/create/

点击Create an Account,跳转代表创建成功,如果没有动作,请上拉至顶部,看看是否有黄色警示框,
(由于我的笔记本屏幕小,当初就在这里浪费了点时间,结果人家的提示框在上面😭😭😭)

注册成功后,回到Genymotion进行登录,点击Setting–>Account,点击Sign in,登录你的账号

下载Android镜像

点击菜单栏ADD,选择系统型号,下一步

完成之后可以根据个人需求进行设置:

设置完后双击,开启虚拟机/或者点Start

👉第十步:运行package,在命令行中进入项目目录,输入:

react-native start

然后相应的目录新开启命令窗口输入:

react-native run-android 

等待一段时间(科学上网工具请准备好):

说明:键入react-native run-android后会看见”.”增加,
这里其实是在下载:

gradle-2.4-all.zip    (就是这个文件)

此文件可以问我要,可以不解压||解压

放到:

C:\Users\用户名\.gradle\wrapper\dists\gradle-2.4-all\6r4uqcc6ovnq6ac6s0txzcpc0\

接着重新执行命令即可

以下是自己翻墙下载时的截图,时间紧迫的可以找我要文件,跳过这里

第一次会很慢,因为需要下载些文件

如果执行过程中报错:

error:failed to find Build Tools revision 23.0.1

请检查SDK下载文件是否都已下载完成

如果报错:

再次执行命令react-native run-android

切出你的安卓模拟器,看见Welcome….代表你成功了